import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import { TitleBar } from "../title-bar";
import { Card } from "../card";
import "./index.scss";

interface ComposeType {
  key: string;
  value: number;
  name: string;
  color: string;
}
interface DataType {
  reportTitle: string;
  title: string;
  data: ComposeType[];
}
type CircularRingType = {
  originData: any;
  type: "taskFileStatisticsChart" | "fileStatisticsChart";
};

export const CircleRing = ({ type, originData }: CircularRingType) => {
  const data = {
    taskFileStatisticsChart: {
      reportTitle: "任务中附件统计",
      title: "任务中附件",
      data: [
        {
          key: "local",
          value: originData?.local,
          name: "本地文件上传",
          color: "#597EF7",
        },
        {
          key: "relation",
          value: originData?.space,
          name: "空间文件关联",
          color: "#40A9FF",
        },
      ],
    },
    fileStatisticsChart: {
      reportTitle: "文件统计",
      title: "总文件",
      data: [
        {
          key: "outer",
          value: originData?.in,
          name: "外部成员上传",
          color: "#85A5FF",
        },
        {
          key: "inner",
          value: originData?.out,
          name: "内部成员上传",
          color: "#597EF7",
        },
      ],
    },
  };
  const finalData = data?.[type]?.data.reduce(
    (all: any, cur: any) => {
      return {
        total: all.total + cur.value,
        color: [...all.color, cur.color],
      };
    },
    {
      total: 0,
      color: [],
    }
  );
  const option = {
    tooltip: {
      trigger: "item", // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
      backgroundColor: "rgba(0,0,0,0.8)", // 提示框浮层的背景颜色。
      borderWidth: 0, // 提示框浮层的边框宽。
      padding: 12, // 提示框浮层内边距，
      renderMode: "html",
      textStyle: {
        // 提示框浮层的文本样式。
        color: "#fff",
        fontWeight: "normal",
        fontSize: 12,
      },
      formatter: function (arg: any) {
        const circle = `<span style="margin-right:5px;display:inline-block;background:${arg.color};width:8px;height:8px;border-radius:50%;"></span>`;
        return `<div style="width:118px;">
                        <p style="margin-bottom:6px;">${circle}${arg.name}</p>
                        <p style="margin-bottom:6px;margin-left:12px;">确认项<span style="float:right;">${arg.value}</span></p>
                        <p style="margin-left:12px;">占比<span style="float:right;">${arg.percent}%</span></p>
                    </div>`;
      },
    },
    title: [
      {
        text: data?.[type].title,
        top: "25%",
        left: "48%",
        textAlign: "center",
        textStyle: {
          color: "#262626",
          fontWeight: "normal",
          fontSize: 12,
        },
      },
      {
        text: finalData.total,
        top: "33%",
        textAlign: "center",
        left: "48%",
        textStyle: {
          color: "#262626",
          fontWeight: 500,
          fontSize: 31,
        },
      },
    ],
    color: finalData.color,
    legend: {
      orient: "vertical",
      left: "27%",
      align: "left",
      top: "77%",
      icon: "circle",
      itemGap: 12,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#262626",
      },
      formatter: (name: string) => {
        let value;
        for (let i = 0, l = data?.[type].data.length; i < l; i++) {
          if (data?.[type].data[i].name == name) {
            value = data?.[type].data[i].value;
          }
        }
        return name + "\t\t\t\t\t\t\t\t\t\t" + value;
      },
    },
    series: [
      {
        type: "pie",
        clockWise: true,
        radius: ["42%", "66%"],
        center: ["50%", "38%"],
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },

            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        data: data?.[type].data,
      },
    ],
  };
  return (
    <div className="assignment">
      <TitleBar name={data?.[type]?.reportTitle} />
      <Card>
        <ReactEcharts className="assignment-echart" option={option} />
      </Card>
    </div>
  );
};
